/* SIDEBAR */

  .container {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .section {
    padding: 2rem 0;
  }

  @media screen and (max-width: 767px) {
    .nav_logo, 
    .nav_toggle, 
    .nav_name {
      display: none;
    }

    .nav_list {
      position: fixed;
      bottom: 2rem;
      background-color: var(--container-color);
      box-shadow: 0 8px 24px hsla(228, 81%, 24%, .15);
      width: 90%;
      padding: 30px 40px;
      border-radius: 1rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 36px;
      transition: .4s;
    }

  }
  .nav_link {
    display: flex;
    color: var(--text-color);
    font-weight: 500;
    transition: .3s;
  }

  .nav_link i {
    font-size: 1.25rem;
  }

  .nav_link:hover {
    color: var(--first-color);
  }

  /* Active link */

  .active-link {
    color: var(--first-color);
  }

  /*<------------ BREAKPOINTS ------------>*/
  /* For small devices */

  @media screen and (max-width: 320px) {
    .nav_list {
      column-gap: 20px;
    }
  }

  /* For medium devices */

  @media screen and (min-width: 576px) {
    .nav_list {
      width: 332px;
    }
  }

  @media screen and (min-width: 767px) {
    .container {
      margin-left: 7rem;
      margin-right: 1.5rem;
    }

    .nav {
      position: relative;
      left: 0;
      background-color: var(--container-color);
      box-shadow: 2px 0 0px hsl(205deg 23% 16%);
      width: 255px;
      height: 100vh;
      padding: 2rem;
      transition: .3s;
      position: fixed;
    }

    .nav_logo {
      display: flex;
    }

    .nav_logo i {
      font-size: 1.25rem;
      color: var(--first-color);
    }

    .nav_logo-name {
      color: var(--title-color);
      font-weight: 600;
    }

    .nav_logo, .nav_link {
      align-items: center;
      column-gap: 1rem;
    }

    .nav_list {
      display: grid;
      row-gap: 2.5rem;
      margin-top: 6.5rem;
    }

    .nav_content {
      overflow: hidden;
      height: 95%;
    }

    .nav_toggle {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: var(--first-color);
      color: #fff;
      border-radius: 50%;
      font-size: 1.20rem;
      display: grid;
      place-items: center;
      top: 2rem;
      right: -10px;
      cursor: pointer;
      transition: .4s;
    }

  }
  /* Show menu */
  .show-menu {
    width: 255px;
  }

  /* Rotate toggle icon */
  .rotate-icon {
    transform: rotate(180deg);
  }

  /* For 2K & 4K resolutions */
  @media screen and (min-width: 2048px) {
    body {
      zoom: 1.7;
    }
  }

  @media screen and (min-width: 3840px) {
    body {
      zoom: 2.5;
    }
  }

  .sidebar-line {
    height: 2px;
    width: 100%;
    background: hsl(205deg 23% 16%);
  }